/** @license
 * MIT License
 *
 * Copyright (c) 2018
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy
 * of this software and associated documentation files (the "Software"), to deal
 * in the Software without restriction, including without limitation the rights
 * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 * copies of the Software, and to permit persons to whom the Software is
 * furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in all
 * copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 * SOFTWARE.
 */
import Taro from '@tarojs/taro'
import React from 'react'
import classnames from 'classnames'
import { Input } from '@tarojs/components'

import './TodoTextInput.scss'

export default class TodoTextInput extends React.Component {
  state = {
    todoText: this.props.text || ''
  }

  handleSubmit = e => {
    console.log('handleSubmit', e)
    const text = e?.detail?.value.trim()
    this.props.onSave(text)
    if (this.props.newTodo) {
      this.setState({todoText: ''})
    }
  }

  handleSubmitKey = e => {
    console.log('handleSubmitKey', e)
    const text = e?.detail?.value.trim()
    if (e.which === 13) {
      this.props.onSave(text)
      if (this.props.newTodo) {
        this.setState({todoText: ''})
      }
    }
  }

  handleChange = e => {
    if (Taro.getEnv() === Taro.ENV_TYPE.WEAPP) return
    console.log('handleChange', e)
    this.setState({todoText: e?.detail?.value})
  }

  handleInput = e => {
    console.log('handleInput', e)
    this.setState({todoText: e?.detail?.value})
  }

  handleBlur = e => {
    console.log('handleBlur', e)
    if (!this.props.newTodo) {
      this.props.onSave(e?.detail?.value)
    }
  }

  render () {
    return (
      <Input
        id='input1'
        className={
          classnames({

            edit: this.props.editing,
            'new-todo': this.props.newTodo
          })}
        placeholderTextColor='#e6e6e6'
        type='text'
        placeholder={this.props.placeholder}
        autoFocus='true'
        confirmType='done'
        value={this.state.todoText}
        onBlur={this.handleBlur}
        onChange={this.handleChange}
        onInput={this.handleInput}
        onKeyDown={this.handleSubmitKey}
        onConfirm={this.handleSubmit}
      />
    )
  }
}
